<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <button id="retest">重新开始一局游戏</button><br>
        <span>请输入要猜的数字：</span>
        <input type="text">
        <button id="number">猜</button><br>
        <span>已经猜的次数：</span>
        <span id="guessCount"> 0</span><br>
        <span>结果：</span><span id="result"></span><br>
    <!--先拿到所有元素-->
    <script>
        let retest =document.querySelector('#retest');
        let numberpan=document.querySelector('#number');
        let guessCount=document.querySelector('#guessCount');
        let resultpan=document.querySelector('#result');
        let input=document.querySelector('input');
        //2.生成一个随机数--1--10
        let toGuess=(Math.random()*100+1);
        //向下取整
        toGuess=Math.floor(toGuess);
        console.log(toGuess);
       //3.实现点击猜按钮的逻辑
       numberpan.onclick=function(){
        if(input.value==''){
            return;
        }
        //将输入的文字转化为整数
        let curNum=parseInt(input.value);
        if(curNum<toGuess){
            resultpan.innerHTML = '低了'
            resultpan.style.color = 'red';
        }else if(curNum>toGuess){
            resultpan.innerHTML='高了'
            resultpan.style.color='red'
        }else {
            resultpan.innerHTML='猜对了'
            resultpan.style.color='green'
        }
        //改变猜的次数
       let Count = parseInt(guessCount.innerHTML);
       guessCount.innerHTML = Count + 1;
       }
       //4.实现retest操作，重新开一局
       retest.onclick=function(){
        location.reload();
       }
    </script>
</body>
</html>